<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title></title>
    <link href="https://cdn.bootcss.com/mapbox-gl/0.45.0-beta.1/mapbox-gl.css" rel="stylesheet">
    <style type="text/css">
        body,
        html {
            margin: 0;
            padding: 0;
        }

        #map1 {
            height: 400px;
            float: left;
            margin-right: 15px;
            width: 24%;
            background: #000;

        }

        #map2 {
            height: 400px;
            float: right;
            margin-left: 15px;
            width: 24%;
            background: #000;
        }

        #map {
            float: left;
        }

        #title {
            height: 60px;
            width: 100%;
            color: #c39f61;
            text-align: center;
            line-height: 60px;
            font-weight: bold;
            font-size: 24px;
            background: #000822;
            margin-bottom: 15px;
        }

        #map1-a,
        #map1-b,
        #map2-a,
        #map2-b {
            width: 100%;
            height: 195px;
            background: #000822;

        }

        #map1-a,
        #map2-a {
            margin-bottom: 10px;
        }

        #map3 {
            width: 100%;
            background: #000;
            margin-top: 15px;
            height: 200px;
            float: left;
            margin-bottom: 40px;
        }

        #map3-a,
        #map3-c {
            height: 200px;
            float: left;
            margin-right: 15px;
            width: 24%;
            background: #000822;
        }

        #map3-c {
            margin-right: 0;
        }

        #map3-b {
            height: 200px;
            float: left;
            margin-right: 15px;
            width: 49%;
            background: #000822;

        }
    </style>
</head>

<body style="background: #000;">
<div id="title">福州市惠民资金大数据可视化平台</div>
<div style="position:absolute;top:30px;left: 40px;color:  white;">惠民总人口数 10,000,000</div>
<img src="./logo.jpg" style="width:100px;height:50px;position: absolute;right: 30px;top: 5px;" alt="">
<div id="map1">
    <div id="map1-a">

    </div>
    <div id="map1-b">

    </div>
</div>
<div id='map' style='width: 49%; height: 400px;'></div>
<div id="map2">
    <div id="map2-a">
    </div>
    <div id="map2-b">
    </div>
</div>
<div id="map3">
    <div id="map3-a">

    </div>
    <div id="map3-b">

    </div>
    <div id="map3-c">

    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/echarts.js"></script>
<script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>
<script src="https://cdn.bootcss.com/mapbox-gl/0.45.0-beta.1/mapbox-gl.js"></script>
<!-- <script src="js/option.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/json.js" type="text/javascript" charset="utf-8"></script>
<script src="js/leftTop.js"></script>
<script src="js/leftCenter.js"></script>
<script src="js/leftbottom.js"></script>
<script src="js/rightTop.js"></script>
<script src="js/rightBottom.js"></script>
<script src="js/setOption.js"></script>

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiY291bGlzIiwiYSI6ImNqZ3Z3OXJ5ODE0cDQyeG52bzJ0MjJvdjMifQ.ZkKWpkDmibMo-dUDjAqYXQ';

    $.getJSON('css/fuzhou.json', function (data) {
        console.log(data)
        var geoCoordMap = {
            '鼓楼区': [119.3, 26.08],
            '台江区': [119.3, 26.08],
            '仓山区': [119.3, 26.05],
            '马尾区': [119.32, 26.05],
            '晋安区': [119.32, 26.08],
            '闽侯县': [119.13, 26.15],
            '连江县': [119.53, 26.2],
            '罗源县': [119.55, 26.48],
            '闽清县': [118.85, 26.22],
            '永泰县': [118.93, 25.87],
            '平潭县': [119.78, 25.52],
            '福清市': [119.38, 25.72],
            '长乐市': [119.52, 25.97],
//				'思明区': [118.08, 24.45],
//				'海沧区': [117.98, 24.47],
//				'湖里区': [118.08, 24.52],
//				'集美区': [118.1, 24.57],
//				'同安区': [118.1, 24.57],
//				'翔安区': [118.23, 24.62],
//				'城厢区': [119.0, 25.43],
//				'涵江区': [119.1, 25.45],
//				'荔城区': [119.02, 25.43],
//				'秀屿区': [119.08, 25.32],
//				'仙游县': [118.68, 25.37],
//				'梅列区': [117.63, 26.27],
//				'三元区': [117.6, 26.23],
//				'明溪县': [117.2, 26.37],
//				'清流县': [116.82, 26.18],
//				'宁化县': [116.65, 26.27],
//				'大田县': [117.85, 25.7],
//				'尤溪县': [117.78, 26.4],
//				'沙县': [117.78, 26.4],
//				'将乐县': [117.47, 26.73],
//				'泰宁县': [117.17, 26.9],
//				'建宁县': [116.83, 26.83],
//				'永安市': [117.37, 25.98],
//				'泉州市': [118.67, 24.88],
//				'鲤城区': [118.6, 24.92],
//				'洛江区': [118.67, 24.95],
//				'泉港区': [118.88, 25.12],
//				'惠安县': [118.8, 25.03],
//				'安溪县': [118.18, 25.07],
//				'永春县': [118.3, 25.03],
//				'德化县': [118.23, 25.5],
//				'石狮市': [118.65, 24.73],
//				'晋江市': [118.58, 24.82],
//				'南安市': [118.38, 24.97],
//				'漳州市': [117.65, 24.52],
//				'龙文区': [117.72, 24.52],
//				'云霄县': [117.33, 23.95],
//				'漳浦县': [117.62, 24.13],
//				'诏安县': [117.18, 23.72],
//				'长泰县': [117.75, 24.62],
//				'东山县': [117.43, 23.7],
//				'南靖县': [117.37, 24.52],
//				'平和县': [117.3, 24.37],
//				'华安县': [117.53, 25.02],
//				'龙海市': [117.82, 24.45],
//				'延平区': [118.17, 26.65],
//				'顺昌县': [117.8, 26.8],
//				'浦城县': [118.53, 27.92],
//				'光泽县': [117.33, 27.55],
//				'松溪县': [118.78, 27.53],
//				'政和县': [118.85, 27.37],
//				'邵武市': [117.48, 27.37],
//				'武夷山市': [118.03, 27.77],
//				'建瓯市': [118.32, 27.03],
//				'建阳市': [118.12, 27.33],
//				'新罗区': [117.03, 25.1],
//				'长汀县': [116.35, 25.83],
//				'永定县': [116.73, 24.72],
//				'上杭县': [116.42, 25.05],
//				'武平县': [116.1, 25.1],
//				'连城县': [116.75, 25.72],
//				'漳平市': [117.42, 25.3],
//				'蕉城区': [119.52, 26.67],
//				'霞浦县': [120.0, 26.88],
//				'古田县': [118.75, 26.58],
//				'屏南县': [118.98, 26.58],
//				'寿宁县': [119.5, 27.47],
//				'周宁县': [119.33, 27.12],
//				'柘荣县': [119.9, 27.23],
//				'福安市': [119.65, 27.08],
//				'福鼎市': [120.22, 27.33],

        }
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                console.log(geoCoord)
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            // console.log(res)
            return res;
        };
        echarts.registerMap('fujian', data);
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption({
            title: {
                left: 'center',
                text: '全市惠民资金发放总金额 130,000,000',
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal'
                }
            },
            geo3D: {
                show: true,
                map: 'fujian',
                regionHeight: 2,
                boxHeight: 20,
                environment: '#000822',
                groundPlane: {
                    show: false,
                    color: '#aaa',
                },
                itemStyle: {
                    areaColor: '#000822',
                    opacity: 1,
                    borderWidth: 0.4,
                    borderColor: '#30477c'
                }
            },
            tooltip: {
                show: true,
                // formatter:(params)=>{
                //   let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
                //   return data;
                // },
            },
            visualMap: [{
                show: true,
                max: 600,
                min: 1,
                calculable: true,
                realtime: false,
                inRange: {
                    color: ['#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                },
                outOfRange: {
                    colorAlpha: 0
                }
            }, {
                type: 'continuous',
                show: false,
                seriesIndex: 1,
                left: 'right',
                max: 1,
                min: 0,
                calculable: true,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43',
                        '#d73027', '#a50026'
                    ]
                }
            }],
            series: [{
                data: convertData([{
                    name: "鼓楼区",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "台江区",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "仓山区",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "马尾区",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "晋安区",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "闽侯县",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "连江县",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "罗源县",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "闽清县",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "永泰县",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "平潭县",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "福清市",
                    value: (Math.random() * 600).toFixed(2)
                }, {
                    name: "长乐市",
                    value: (Math.random() * 600).toFixed(2)
                }

                ]),
                name: 'bar3D',
                type: "bar3D",
                coordinateSystem: 'geo3D',
                barSize: 1, //柱子粗细
                shading: 'realistic',
                opacity: 1,
                bevelSize: 0.5,
                label: {
                    show: false,
                    formatter: '{b}'
                },

            }]
        });

    });

    function  Test() {
        $.ajax({
            type:"post",
            url:"http://fzhmw.yunmansk.com/county/listtop",
            data:JSON.stringify({"year":"2017"}),
            contentType:"application/json",
            success:function(data){
                alert(data);
            }
        })
    }
</script>
<button id="bun" onclick="Test()">测试</button>
</body>

</html>